import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/config/prefs.dart';
import 'package:love_app/providers/bg_model.dart';
import 'package:love_app/providers/share_provider.dart';
import 'package:provider/provider.dart';

// 共享模型
ShareProvider _shareProvider;
BgModel _bgModel;
BuildContext _context;

class BackgtoundOpenDialog extends StatelessWidget {
  // final BgModel bgModel;

  // BackgtoundOpenDialog({Key key,@required this.bgModel}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    _shareProvider = Provider.of<ShareProvider>(context, listen: false);
    _bgModel = Provider.of<BgModel>(context, listen: false);
    _context = context;
    return Container(
      child: AlertDialog(
        shape: RoundedRectangleBorder(
            // 边框设置
            borderRadius: BorderRadius.all(Radius.circular(16))),
        contentPadding: EdgeInsets.all(0),
        content: _contentData(),
      ),
    );
  }

  // 弹窗的内容
  Widget _contentData() {
    return Container(
      width: ScreenUtil().setWidth(578),
      height: ScreenUtil().setHeight(602),
      child: Column(
        children: <Widget>[
          _conetntTop(),
          // _contentCentent(),
          // _contentBpttom(),
        ],
      ),
    );
  }

  // 上部分内容
  Widget _conetntTop() {
    return Container(
      height: ScreenUtil().setHeight(184),
      width: Su().w(578),
      decoration: BoxDecoration(
        // color: _shareProvider.textColor,
        color: _shareProvider.textColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      child: _conetntTopChild(),
    );
  }

  // 上部分内容组成
  Widget _conetntTopChild() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        _topTitle,
        Container(
          padding: EdgeInsets.only(
            top: Su().h(10),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              _topBgButton(),
              _topLoveTimeButton(),
            ],
          ),
        ),
      ],
    );
  }

  // 标题
  final Widget _topTitle = Container(
    margin: EdgeInsets.only(top: ScreenUtil().setHeight(15)),
    child: Text(
      '我们相恋99天',
      style: Su().textStyle(Colors.white, 36),
    ),
  );

  // 更改相恋时间
  Widget _topBgButton() {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(Su().w(10)),
      ),
      padding: EdgeInsets.only(
        left: Su().w(8),
        right: Su().w(8),
        top: Su().h(10),
        bottom: Su().h(10),
      ),
      child: InkWell(
        hoverColor: Colors.red,
        onTap: () {
          _openImage(_context);
        },
        child: Text(
          '修改背景图片',
          style: Su().textStyle(Colors.white, 25.5),
        ),
      ),
    );
  }

  // 更改相恋时间
  Widget _topLoveTimeButton() {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(Su().w(10)),
      ),
      padding: EdgeInsets.only(
        left: Su().w(8),
        right: Su().w(8),
        top: Su().h(10),
        bottom: Su().h(10),
      ),
      child: InkWell(
        hoverColor: Colors.red,
        onTap: () {},
        child: Text(
          '修改相恋日期',
          style: Su().textStyle(Colors.white, 25.5),
        ),
      ),
    );
  }

  // 点击修改背景图片按钮的方法
  Future<File> _openImage(BuildContext context) {
    return showModalBottomSheet(
      context: context,
      builder: (BuildContext content) {
        return Container(
          height: Su().h(250),
          child: _imageAndCamera(),
        );
      },
    );
  }

  // 底部弹出框选择图片或者相机
  Widget _imageAndCamera() {
    return Column(
      children: <Widget>[
        _checkOpenImage(),
        _checkOpenCamera(),
      ],
    );
  }

  // 选择打卡相册
  ListTile _checkOpenImage() {
    return ListTile(
      leading: new Icon(
        Icons.photo_camera,
        color: _shareProvider.textColor,
      ),
      title: new Text(
        "相机",
      ),
      onTap: () async {
        var imageFile = await ImagePicker.pickImage(source: ImageSource.camera);
        if (imageFile != null) {
          await _imageCropper(imageFile);
        } else {
          Navigator.pop(_context);
        }
      },
    );
  }

  // 选择打开相机
  ListTile _checkOpenCamera() {
    return ListTile(
      leading: new Icon(
        Icons.photo_filter,
        color: _shareProvider.textColor,
      ),
      title: new Text("相册"),
      onTap: () async {
        var imageFile =
            await ImagePicker.pickImage(source: ImageSource.gallery);
        if (imageFile != null) {
          await _imageCropper(imageFile);
        } else {
          Navigator.pop(_context);
        }
      },
    );
  }

  // 编辑图片插件
  Future<Null> _imageCropper(File imageFile) async {
    File croppedFile = await ImageCropper.cropImage(
      sourcePath: imageFile.path,
    );
    // 自定义图片名称
    String imageName =
        DateTime.now().millisecondsSinceEpoch.toString() + '.jpg';
    String pathName = await Su().getFileName(imageName);
    await croppedFile.copy(pathName);
    var pres = await Su().presObject();
    String key =
        Prefs.firstPage + _shareProvider.uid.toString(); // 保存的key为手机号码， name为图片路径
    pres.setString(key, pathName); // 保存bg图片名称
    // _bgModel.update();
    _bgModel.firstBgImage = FileImage(File(pathName));
    _bgModel.update();
    // 关闭两个弹窗（因为bg图片已经更换完毕）
    Navigator.pop(_context);
    Navigator.pop(_context);
  }

  // 模拟从后台获取的数据
  List<Map> data() {
    return [
      {
        'name': '恋爱日记',
        'type': '条',
        'num': '7',
      },
      {
        'name': '视频',
        'type': '段',
        'num': '0',
      },
      {
        'name': '照片',
        'type': '张',
        'num': '26',
      },
      {
        'name': '纪念日',
        'type': '个',
        'num': '1',
      },
      {
        'name': '语音',
        'type': '段',
        'num': '0',
      },
    ];
  }
}
